<template>
  <div class="bill_list">
    <header-go-back :title="`${selectMonth.getMonth() + 1}月账单`" text="排序" @back="handleGoBock"></header-go-back>
    <div class="bill_list_content">
      <daily-bill-card :data="item" v-for="(item, index) in billData" :key="'bill' + index"></daily-bill-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue';
import DailyBillCard from '@/components/bill/DailyBillCard.vue';
import { useRoute, useRouter } from 'vue-router';
import { getStartAndEnd } from '@/utils/helper';
import { getBillListForRange } from '@/api/bill';
import dayjs from 'dayjs';
export default defineComponent({
  components: {
    HeaderGoBack,
    DailyBillCard
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const selectMonth = ref(new Date())
    const billData = ref([])
    const getBillData = (start: Date, end: Date) => {
      getBillListForRange({
        start: dayjs(start).format('YYYY-MM-DD'),
        end: dayjs(end).format('YYYY-MM-DD'),
        type: 'day'
      }).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          billData.value = res.data
        }
      })
    }
    const handleGoBock = () => {
      router.push('/chart')
    }
    onMounted(() => {
      if(route.query.date) {
        selectMonth.value = new Date(JSON.parse(route.query.date as string))
        const date = getStartAndEnd(selectMonth.value as Date)
        getBillData(date.start, date.end)
      }
    })
    return {
      selectMonth,
      billData,
      handleGoBock
    }
  }
})
</script>

<style scoped>
  .bill_list_content {
    margin: 16px;
    height: calc(100vh - 92px);
    overflow-y: auto;
  }
</style>